import React, { PureComponent } from 'react';
import { LeftPage, LeftTopBox, LeftBottomBox } from './style';
import { ModuleTitle } from '../../style/globalStyledSet';
import { BorderBox12, BorderBox13 } from '@jiaminghi/data-view-react';
import TrafficSituation from './charts/TrafficSituation';
import UserSituation from './charts/UserSituation';
import { connect } from 'dva';
import { getBigScreenData,getBigScreenList } from '../../services/index';
function compare(property){
  return function(a,b){
      // console.log(a,b);
      var value1 = a[property];
      var value2 = b[property];
      return  value2 -value1;
  }
}
class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      pageNum:1,
      userSitua:{
  
      },
      city:'',
      allData:{
        todaySales:'1',
        yesterdaySales:'',
        todayCookNumbers:'',
        yesterdayNumbers:'',
        todayCookNumbers:'',
        yesterdayCookNumbers:''
      }
    };
  }
  componentDidMount(){
    this.props.onRef(this)
    this.getList();
    this.getC_Table();
    setInterval(()=>{
      this.getList();
    },1000*60*2)
  }
  async getList(){
    let res = await getBigScreenData();  
    if(!res){return} 
    this.setState({
      allData : res.result
    }) 
  }
  async getMapDataList(city){
    this.getC_Table(city);
    this.setState({ 
      city,
    })

  }
  leftClick=id=>{
    this.props.storeClick(id)
  }
  async getC_Table(city){
    let params ={pageNum:this.state.pageNum, pageSize:200};
    if (city){params.city = city}
    let res = await getBigScreenList(params);
    if(!res){return} 
    let userSitua ={
      header: ['店铺名', '状态','库存','']
    } 
    let arr = res.result.data.map((item,index) => {
      let arr1 =  item.deviceStatus.sort(compare("type")).map(g=>{
        if(g.type==1){ // 烹饪机
          return g.online  == "red" ? '<div class="iconfont icon-prj redcolor"></div>' : g.online  == "green" ? '<div class="iconfont icon-prj greencolor"></div>' : '<div class="iconfont icon-prj graycolor"></div>'
        }else if(g.type==3){
          return g.online  == "red" ? '<div class="iconfont icon-weibolu redcolor"></div>' : g.online  == "green" ? '<div class="iconfont icon-weibolu greencolor"></div>' : '<div class="iconfont icon-weibolu graycolor"></div>'
        }
        else{
          return g.online  == "red" ? '<div class="iconfont icon-guizi redcolor"></div>' : g.online  == "green" ? '<div class="iconfont icon-guizi greencolor"></div>' : '<div class="iconfont icon-guizi graycolor"></div>'
        }
        
      })
      let str = "<div class='lamp-box'>"+ arr1.join("") +"</div>"; 
      return [
        `<div style="color:green;cursor:pointer">${item.storeName}</div>`,
        // item.channelName,
        str,
        item.stock  == "red" ? '<div class="online red"></div>' : item.stock  == "yellow" ? '<div class="online yellow"></div>' : '<div class="online green"></div>', 
        item.videoUrl?`<img src="https://images.51zd.com.cn/upload/public/20210510/1620637813479-998f408a-b4c7-41b5.png" class="ship-img"></img>`:'',
        item.storeId ,
        item.videoUrl,
      ] 
    })
    userSitua.data = arr;
    this.setState({
      userSitua 
    })
  }
  render() {
    // const { userSitua, trafficSitua, accessFrequency, peakFlow } = this.props;
    const { allData,userSitua,city }=this.state;
    return (
      <LeftPage>
        {/* 顶部图表 */}
        <LeftTopBox>
          <BorderBox12 className='left-top-borderBox12'>
            <div className='left-top'>
              <ModuleTitle>
                <i className='iconfont'>&#xe78f;</i>
                <span>今日简报</span>
              </ModuleTitle>
              <div className='title-dis'>
                <div>
                  今日销售金额:
                  <div className='title-dis-keyword'>{allData.todaySales}(元)</div>
                </div>
                <div>
                  昨日销售金额:
                  <div className='title-dis-keyword'>{allData.yesterdaySales}(元)</div>
                </div>
 
              </div> 
              <div className='title-dis'>
                <div>
                  今日销售:
                  <span className='title-dis-keyword'>{allData.todayNumbers}(份)</span>
                </div>
                <div>
                  昨日销售:
                  <span className='title-dis-keyword'>{allData.yesterdayNumbers}(份)</span>
                </div>
 
              </div> 
              <div className='title-dis'>
                <div>
                  今日烹饪机加热:
                  <span className='title-dis-keyword'>{allData.todayCookNumbers}(份)</span>
                </div>
                <div>
                  昨日烹饪机加热:
                  <span className='title-dis-keyword'>{allData.yesterdayCookNumbers}(份)</span>
                </div>
 
              </div> 
              {/* <TrafficSituation trafficSitua={trafficSitua}></TrafficSituation> */}
            </div>
          </BorderBox12>

        </LeftTopBox>
        
        {/* 底部图表 */}
        <LeftBottomBox>
          <BorderBox13 className='left-bottom-borderBox13'>
            <div className='left-bottom'>
              <ModuleTitle>
                <i className='iconfont'>&#xe88e;</i>
                <span>店铺状态({city||'全部'})</span>
              </ModuleTitle>
              {/* 图表 */}
              <UserSituation userSitua={userSitua} leftClick={this.leftClick}></UserSituation>
            </div>
          </BorderBox13>
        </LeftBottomBox>
      </LeftPage>
    );
  }
}

const mapStateToProps = state => { 
  return {
    accessFrequency: state.leftPage.accessFrequency,
    peakFlow: state.leftPage.peakFlow,
    userSitua: state.leftPage.userSitua,
    trafficSitua: state.leftPage.trafficSitua, 
  };
};

const mapStateToDispatch = dispatch => ({});

export default connect(mapStateToProps, mapStateToDispatch)(index);
